<template>
    <div class="page">
        <div class="header">
            <v-header></v-header>
        </div>
        <div class="page-body">
            <router-view v-if="isRouterAlive"></router-view>
        </div>
        <v-footer></v-footer>
    </div>
</template>

<script>
    import vHeader from "./components/Header.vue";
    import vFooter from "./components/Footer.vue";
    import { ref, nextTick, provide } from "vue";
    export default {
        name: "Frame",
        components: {
            vHeader,
            vFooter,
        },
        setup() {
            // 局部组件刷新
            const isRouterAlive = ref(true);
            const reload = () => {
                isRouterAlive.value = false;
                nextTick(() => {
                    isRouterAlive.value = true;
                });
            };
            provide("reload", reload);
            return {
                isRouterAlive
            }
        },
    }
</script>

<style scoped>
.header {
    z-index: 1000;
}
.page-body {
    margin-top: 60px;
    display: block;
    z-index: 100;
}
.left-side {
    display: inline-block;
    margin-left: 15px;
    margin-top: 15px;
}
.list {
    display: inline-block;
    position: absolute;
    left: 22vw;
    margin-top: 5px;
}
.right-side {
    z-index: 10;
    display: inline-block;
    position: absolute;
    right: 15px;
    margin-top: 15px;
}
</style>